M
MLOG
Відкладене завантаження в React: Розділення коду компонентів для оптимізації продуктивності | MLOG | MLOG ); } export default ImageGallery;

І компонент Image.js:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

У цьому прикладі кожне зображення обгорнуте в компонент <Suspense>, тому для кожного зображення під час його завантаження буде відображатися повідомлення про завантаження. Це запобігає блокуванню всієї сторінки під час завантаження зображень.

Просунуті техніки та рекомендації

1. Межі помилок (Error Boundaries)

При використанні відкладеного завантаження важливо обробляти потенційні помилки, які можуть виникнути під час процесу завантаження. Межі помилок можна використовувати для перехоплення цих помилок та відображення резервного інтерфейсу. Ви можете створити компонент межі помилок наступним чином:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Оновлюємо стан, щоб наступний рендер показав резервний UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Ви також можете логувати помилку в сервіс звітності про помилки
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Ви можете рендерити будь-який власний резервний UI
      return 
Щось пішло не так.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Потім обгорніть компонент <Suspense> у <ErrorBoundary>:



  Завантаження...}>

Якщо під час завантаження MyComponent виникне помилка, <ErrorBoundary> перехопить її та відобразить резервний інтерфейс.

2. Серверний рендеринг (SSR) та відкладене завантаження

Відкладене завантаження також можна використовувати разом із серверним рендерингом (SSR) для покращення початкового часу завантаження вашого додатка. Однак це вимагає додаткової конфігурації. Вам потрібно буде переконатися, що сервер може коректно обробляти динамічні імпорти, і що компоненти з відкладеним завантаженням правильно гідратуються на стороні клієнта.

Інструменти, такі як Next.js та Gatsby.js, надають вбудовану підтримку для відкладеного завантаження та розділення коду в середовищах SSR, що значно спрощує процес.

3. Попереднє завантаження компонентів

У деяких випадках ви можете захотіти попередньо завантажити компонент до того, як він справді знадобиться. Це може бути корисно для компонентів, які, ймовірно, будуть відрендерені незабаром, наприклад, компоненти, що знаходяться під згином, але, ймовірно, будуть прокручені у видиму область. Ви можете попередньо завантажити компонент, викликавши функцію import() вручну:


import('./MyComponent'); // Попереднє завантаження MyComponent

Це почне завантаження компонента у фоновому режимі, тому він буде доступний швидше, коли його справді потрібно буде відрендерити.

4. Динамічні імпорти з магічними коментарями Webpack

"Магічні коментарі" Webpack надають спосіб налаштовувати імена згенерованих частин коду. Це може бути корисним для налагодження та аналізу структури бандла вашого додатка. Наприклад:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Це створить частину коду з назвою "my-component.js" (або схожою) замість загальної назви.

5. Уникнення поширених помилок

Реальні приклади та випадки використання

Відкладене завантаження можна застосовувати до широкого спектра сценаріїв для покращення продуктивності React-додатків. Ось кілька прикладів:

Приклад: Міжнародний сайт електронної комерції

Уявіть собі сайт електронної комерції, що продає товари по всьому світу. Різні країни можуть мати різні валюти, мови та каталоги товарів. Замість того, щоб завантажувати всі дані для кожної країни наперед, ви можете використовувати відкладене завантаження для завантаження даних, специфічних для місцезнаходження користувача, лише коли він відвідує сайт.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Функція для визначення країни користувача

  return (
    Завантаження контенту для вашого регіону...}>
      
      
    
  );
}

Висновок

Відкладене завантаження та розділення коду компонентів — це потужні техніки для оптимізації продуктивності React-додатків. Завантажуючи компоненти лише тоді, коли вони потрібні, ви можете значно скоротити початковий час завантаження, покращити користувацький досвід та посилити своє SEO. Вбудовані компоненти React React.lazy() та <Suspense> спрощують впровадження відкладеного завантаження у ваших проектах. Використовуйте ці техніки для створення швидших, чутливіших та більш захоплюючих веб-додатків для глобальної аудиторії.

Пам'ятайте завжди враховувати користувацький досвід при впровадженні відкладеного завантаження. Надавайте інформативні резервні інтерфейси, витончено обробляйте потенційні помилки та ретельно аналізуйте продуктивність вашого додатка, щоб переконатися, що ви досягаєте бажаних результатів. Не бійтеся експериментувати з різними підходами та знаходити найкраще рішення для ваших конкретних потреб.